import { moneyFormat } from "@/utils/utils";
import TabPane from "@ant-design/pro-card/lib/components/TabPane";
import ProForm, { DrawerForm, ModalForm, ProFormDatePicker, ProFormDateRangePicker, ProFormDigit, ProFormGroup, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { EditableProTable, ProColumns } from "@ant-design/pro-table"
import { Button, Table, Tabs, Image, Descriptions, Timeline, Upload } from "antd";
import { useState } from "react";
import process from '@/assets/imgs/process.png';
import { UploadOutlined } from "@ant-design/icons";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [showTransfor,setShowTransfor] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const [proData,setProData]  =useState<any>([{id:'1',pIndex:1},{id:'2',pIndex:2}]);
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([1,2]);
  const [tabKey,setTabKey] = useState("1");
  const [showFollow,setShowFollow] = useState(false);


  const clauseColumn:ProColumns[] = [
    {
      title:'条款号',
      dataIndex: 'code',
      ellipsis:true,
      width:100,
      renderText:()=>'1'
    },
    {
      title:'商务条款',
      dataIndex: 'clause',
      ellipsis:true,
      renderText:()=>'条款标题内容'
    },
    {
      title:'条款说明',
      dataIndex: 'summary',
      ellipsis:true,
      renderText:()=>'条款说明内容'
    },
  ]

  const columns_2:ProColumns[] = [
    {
      title: '产品名称',
      editable: false,
      dataIndex: 'n1',
      renderText:()=>'多孔机器人'
    },
    {
      title: '产品型号',
      dataIndex: 'n2',
      editable: false,
      renderText:()=>'CP.2012312'
    },
    {
      width: 100,
      ellipsis:true,
      title: '单位',
      dataIndex: 'packing_unit',
      hideInSearch: true,
      editable: false,
      renderText:()=>'跟'
    }, {
      width: 150,
      title: '数量',
      dataIndex: 'numbs',
      valueType:'digit',
    },
    {
      width: 150,
      title: '单价',
      valueType:'digit',
      dataIndex: 'price',
    },
    {
      width: 150,
      title: '金额',
      editable: false,
      valueType:'digit',
      dataIndex: 'price2',
    },
    {
      title: "操作",
      valueType: 'option',
      width:150,
      render: (text, record:any,_, action) => [
     
      ]
    }
  ]
  
  const aColumn:ProColumns[] = [
    {
      title:'跟进方式',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'线下'
    },
    {
      title:'跟进内容',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'线下拜访了客户'
    },
    {
      title:'跟进时间',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'2023-05-10'
    },
    {
      title:'下次联系时间',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'2023-05-12'
    },
  ]
  const [dataList,setDataList] =useState<any>([
    {
      name11:'SO.202301020312001',
      name:'上海XXXX医院',
      name1:'杨院长',
      date3:'OPP.20221201001',
      date41:'500000',
      date42:'300000',
      date43:'200000'
    },
    {
      name11:'SO.202301020312002',
      name:'北京XXXX医院',
      name1:'李院长',
      date3:'OPP.20221201002',
      date41:'550000',
      date42:'350000',
      date43:'250000'
    },
    {
      name11:'SO.202301020312003',
      name:'上海XXXX医院',
      name1:'赵院长',
      date3:'OPP.20221201004',
      date41:'600000',
      date42:'300000',
      date43:'200000'
    },
    {
      name11:'SO.202301020312004',
      name:'北京XXXX医院',
      name1:'张院长',
      date3:'OPP.20221201001',
      date41:'600000',
      date42:'100000',
      date43:'100000'
    },
   
  ]);
  const columns:ProColumns[] = [
    {
      title:'合同编码',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
    },
    {
      title:'客户名称',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
    },
    {
      title:'联系人',
      dataIndex: 'name1',
      width:100,
    },
    {
      title:'合同状态',
      dataIndex: 'name9',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'执行中',
        '2':'待签约',
        '3':'完毕',
      },
      renderText:()=>'执行中'
    },
    {
      title:'关联商机',
      dataIndex: 'date3',
      width:150,
    },
    {
      title:'关联报价单',
      dataIndex: 'date4',
      width:150,
    },
    {
      title:'合同金额',
      dataIndex: 'date41',
      width:150,
      valueType:'money',
      hideInSearch:true,
    },
    {
      title:'已收款',
      dataIndex: 'date43',
      width:150,
      valueType:'money',
      hideInSearch:true,
    },
    {
      title:'未收款',
      dataIndex: 'date42',
      width:150,
      valueType:'money',
      hideInSearch:true,
    },
    {
      title:'签订人',
      dataIndex: 'date5',
      width:100,
      renderText:()=>'张三'
    },
    {
      title:'签订日期',
      dataIndex: 'name2',
      width:100,
      hideInSearch:true,
      renderText:()=>'2023-01-20'
    },
    {
      title:'电话号码',
      ellipsis:true,
      width:100,
      dataIndex: 'name3',
      renderText:()=>'1512345678'
    },
    {
      title: "操作",
      valueType: 'option',
      fixed:'right',
      width:180,
      render: (text, record:any,_, action) => [
        <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  const eColumn:ProColumns[] = [
    {
      title:'期数',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'1'
    },
    {
      title:'客户名称',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'xxxxx人民医院'
    },
    {
      title:'合同编号',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'Qxxxx0001'
    },
    {
      title:'计划回款金额',
      dataIndex: 'date3',
      valueType:'money',
      width:120,
      renderText:()=>'33000'
    },
    {
      title:'计划回款日期',
      dataIndex: 'date4',
      width:120,
      renderText:()=>'2023-04-20'
    },
    {
      title:'计划回款方式',
      dataIndex: 'date3',
      width:120,
      renderText:()=>'网上转账'
    },
    {
      title:'回款状态',
      dataIndex: 'date4',
      width:120,
      renderText:()=>'已回款'
    },
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={dataList}
        scroll={{x:1300}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        menu: {
          type: 'tab',
          activeKey: activeKey,
          items: [
            {
              key: 'tab1',
              label: <span>全部</span>,
            },
            {
              key: 'tab2',
              label: <span>今日新增</span>,
            },
            {
              key: 'tab5',
              label: <span>本周新增</span>,
            },
            {
              key: 'tab3',
              label: <span>我负责的</span>,
            },
            {
              key: 'tab4',
              label: <span>我协同的</span>,
            },
          ],
          onChange: (key) => {
            setActiveKey(key as string);
          },
        },
        settings: [],
      }}
      />

<DrawerForm title='详情' width={1200} visible={showDetail}  labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
           <div style={{position:'fixed',right:50,top:10}}>
                <Button
                                type='primary'
                                key='primary'
                       
                                onClick={async() => {
                                 
                                }}
                                >
                              打印
                 </Button>
            </div>
           <Descriptions title="" column={3} size="small"  bordered>
                    <Descriptions.Item label="合同编号">A01</Descriptions.Item>
                    <Descriptions.Item label="客户名称">北京XXXX医院</Descriptions.Item>
                    <Descriptions.Item label="合同金额">¥46,780</Descriptions.Item>
                    <Descriptions.Item label="负责人">李四</Descriptions.Item>
                    <Descriptions.Item label="创建日期">2022-07-23</Descriptions.Item>
         </Descriptions>
         <div style={{height:20}}></div>
            <Tabs defaultActiveKey="1" activeKey={tabKey} onTabClick={(key)=>{
                setTabKey(key)
              }}  centered style={{backgroundColor:'#fff',padding:'0 20px 20px 20px'}}>
                
                 <TabPane tab="基本信息" key="1" >
                 <div style={{height:20}}></div>
                 <ProFormGroup>
            <ProFormText name="name" width={'md'} label="客户名称" rules={[{ required: true}]}/>
            <ProFormSelect name="name1" width={'md'} label="商机名称" rules={[{ required: true}]} options={[{label:'商机xxxx1',value:'0'}]}/>
            <ProFormSelect name="name2" width={'md'} label="报价单" rules={[{ required: true}]} options={[{label:'报价单xxxx1',value:'0'}]}/>
            <ProFormDigit name="price" width={'md'} label="合同金额" rules={[{ required: true}]}/>
          </ProFormGroup>
          <ProFormGroup>
            <ProFormDateRangePicker name="date" width={'md'}  label="合同时间" rules={[{ required: true}]}/>
            <ProFormSelect name="name" width={'md'} label="客户签约人" rules={[{ required: true}]} options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]}/>
            <ProFormSelect name="name" width={'md'} label="公司签约人" rules={[{ required: true}]} options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]}/>

            <ProFormSelect name="name9" width={'md'} label="负责人" mode='multiple' options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]} />
            <ProFormSelect name="name10" width={'md'} label="协同人" mode='multiple' options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]} />
          </ProFormGroup>

          <div style={{marginTop:0,marginBottom:10}}>
                商务条款
              </div>
              <ProTable
                              headerTitle={false}
                              dataSource={[{}]}
                              columns={clauseColumn}
                              rowKey='id'
                              search={false}
                              key='dealer'
                              toolBarRender={false}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />          
              <div style={{textAlign:'center',padding:'10px 0'}}>
                <Button type="primary">添加</Button>
              </div>

            </TabPane>
            <TabPane tab="产品" key="2" >
              <div style={{height:20}}></div>
              <EditableProTable headerTitle='产品列表' style={{marginLeft:-20}}  toolBarRender={()=>[<Button
                      type='primary'
                      key='new'
                      onClick={() => {
                      }}
                      >新增产品
                      </Button>]}
                    toolbar={{settings:[]}} rowKey='pIndex' columns={columns_2} value={proData} recordCreatorProps={false} onChange={data => {
            setEditableRowKeys(data.map((item: any) => item.pIndex));
            setProData(data);
          }} editable={{
            type: 'multiple',
            editableKeys,
            onValuesChange: (record, recordList) => {
              setProData(recordList);
            },
            actionRender: (row, config, defaultDoms) => {
              return [defaultDoms.delete];
            },
            onChange: setEditableRowKeys
        }} summary={()=>{
          return (
            <>
              <Table.Summary.Row>
                <Table.Summary.Cell index={1} colSpan={3}>总计:</Table.Summary.Cell>
                <Table.Summary.Cell index={1} align='center'>
                  3
                </Table.Summary.Cell>
                <Table.Summary.Cell index={1}>
                </Table.Summary.Cell>
                <Table.Summary.Cell index={1} align='center'>
                ￥{moneyFormat(10000)}
                </Table.Summary.Cell>
                <Table.Summary.Cell index={1} colSpan={1}>
                </Table.Summary.Cell>
              </Table.Summary.Row>             
            </>
          );
        }}></EditableProTable>
        
            </TabPane>

            <TabPane tab="活动" key="3" >
                <ProTable
                              headerTitle=''
                              dataSource={[{id:'1'}]}
                              columns={aColumn}
                              rowKey='id'
                              key='sale'
                              search={false}
                              toolBarRender={() => [
                                <Button
                                  type="primary"
                                  key="primary"
                                  onClick={() => {
                                    setShowFollow(true)
                                  }} >写跟进</Button>]}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />
            </TabPane>
            <TabPane tab="回款" key="4" >
                <ProTable
                              headerTitle=''
                              dataSource={[{id:'1'}]}
                              columns={eColumn}
                              rowKey='id'
                              key='sale'
                              search={false}
                              toolBarRender={() => [
                                <Button
                                  type="primary"
                                  key="primary"
                                  onClick={() => {
                                  }} >新增回款</Button>]}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />
            </TabPane>
            <TabPane tab="附件" key="5" >

              <div style={{height:20}}></div>
                  <Upload fileList={fileList}   data={{'userId':sessionStorage.getItem('userId')}} >
                      <Button  icon={<UploadOutlined />}>上传附件</Button>
                    </Upload>
            </TabPane>
            <TabPane tab="操作记录" key="6" >
            <div style={{height:20}}></div>
            <Timeline mode="alternate">
              <Timeline.Item label='04-18'>张三 新建了合同</Timeline.Item>
              <Timeline.Item label='04-22' color="green">李四 跟进了合同</Timeline.Item>
              <Timeline.Item label='05-10' color="red">王五 签订了合同</Timeline.Item>
            </Timeline>
            </TabPane>
          </Tabs>
           
          <ModalForm
            title="跟进"
            width={500}
            labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"
            modalProps={{
              forceRender: true,
                destroyOnClose: true,
            }}
            visible={showFollow}
            onVisibleChange={(val)=>{
              setShowFollow(val)
            }}
            onFinish={async(value)=>{
              return true;
            }}
          >
              <ProFormSelect  name="recv_consignee" label="跟进方式" options={[{label:'打电话',value:'1'},{label:'会面',value:'2'}]}   width="md"/>
              <ProFormDatePicker  name="next" label="下次联系时间"   width="md"/>
              <ProFormTextArea name='content' label='跟进内容' width={'md'}></ProFormTextArea>
          </ModalForm>
      </DrawerForm>

     
    </PageContainer>)
}